<template>
  <div>
    <component 
    v-if="formComponent"
    v-bind:is="formComponent" 
    :getCalculateValue="getCalculateValue"
    :saveOnlyUploads="saveOnlyUploads"
    :handleSubmit="handleSubmit"
    :handleParentPrint="handlePrint"
    @handleSave="handleSave"
    @handleAssignee="handleAssignee"
    @handleBack="handleBack"
    @handleClose="handleClose"
    ></component>
    <EmptyComp v-else />
  </div>
</template>

<script>
import Vue from 'vue'
import EmptyComp from '@/components/EmptyComp'
import DeptSelect from '@/components/DeptSelect'
import DeptPositionS from '@/components/DeptPositionS'
import DeptUserS from '@/components/DeptUserS'
import DeptPositionUser from '@/components/DeptPositionUser'



import * as beautifier from 'js-beautify'
import { makeUpHtml } from '@/views/workflow/components/generator/html'
import { makeUpJs } from '@/views/workflow/components/generator/js'
import { makeUpCss } from '@/views/workflow/components/generator/css'
import { exportDefault, beautifierConf } from '@/views/workflow/utils/generator/index'
import { calculateValue } from '@/api/workflow/form/index'


export default {
  name: '报表渲染',
  components: {
  },
  data() {
    return {
        formComponent: null, // 动态组件，即自定义表单生成的html
        // readonly: false,
        layoutId: '',
        userId: ''
    }
  },
  computed: {

  },
  async created() {
    
  },
  mounted(){
    this.getInfo()
  },
  methods: {
    async getInfo() { // 获取当前节点的相关信息
      let html = null
      let customAttribute = null
      let formData = null
      let auditStatus = 1
      let comment = ''
      if (this.formHtml && Object.keys(this.formHtml).length) { // formHtml有值，则为预览
        html = this.formHtml
      } else if (this.procdefId) {
        const post = {
          procdefId: this.procdefId,
          deploymentId: this.processDeploymentId,
          taskId: this.taskId
        }
        // if (!post.procdefId || !post.deploymentId) return
        const res = await getInfo(post)
        if (res && res.data) {
          this.formDataId = res.data.formDataId
          if (res.data.formLayout) {
            this.layoutId = res.data.formLayout.layoutId
            html = res.data.formLayout.html ? JSON.parse(res.data.formLayout.html) : {}
          }
          customAttribute = res.data.customAttribute
          formData = res.data.formData
          auditStatus = res.data.auditStatus
          comment = res.data.comment
        }
      }
      if (html && Object.keys(html).length) {
        this.setComponent(html, customAttribute, formData, auditStatus, comment)
      }
    },
    setComponent(formHtml, nodeInfo, formData, auditStatus, comment) { // 设置动态组件
      formData = formData || {}
      if (!formHtml) return
      const generateConf = { type: 'file' } // 可以生成页面、弹窗两种模式， 弹窗模式暂不用

      let htmlCode = makeUpHtml(formHtml, generateConf.type)
      // console.log('formHtml', formHtml)
      htmlCode = beautifier.html(htmlCode, beautifierConf.html)
      // console.log('html', htmlCode)

      let jsCode = makeUpJs(formHtml, generateConf.type)
      jsCode = beautifier.js(jsCode, beautifierConf.js)
      // console.log('jsCode', jsCode)

      let cssCode = makeUpCss(formHtml)
      cssCode = beautifier.css(cssCode, beautifierConf.html)
      let component =  {
        ...eval(`(${jsCode.replace(exportDefault, '')})`),
        template: `
        <div>${htmlCode}</div>
        `
      }
      component.data.nodeInfo = nodeInfo || {}
      component.data.formData = { ...component.data.formData, ...formData }
      component.data.auditStatus = auditStatus || 1
      component.data.comment = comment || ''
      const data = component.data
      delete component.data
      component.data = function() {
        return data
      }
      component.components = { // 导入子组件
        UserLink,
        SupplierLink,
        DeptSelect,
        DeptPositionS,
        DeptUserS,
        DeptPositionUser,
        UserFile,
        TabDataSelector
      }
      // this.formComponent = Vue.extend(component)
      this.formComponent = component
    },
    async getCalculateValue(valueType, valueData, formData) { // 获取字段值类型的数据
      formData = formData || {}
      const data = {
        valueType: valueType,
        valueData: valueData,
        formData: JSON.stringify(formData)
      }
      const res = await calculateValue(data)
      return res ? res.data : undefined
    },handle
  },
}
</script>

<style scoped>
  .tree-box {
    height: 200px;
    overflow: auto;
  }
  .table-tool-bar {
    padding: 10px;
    border: 1px solid #E0E0E0;
    text-align: right;
  }
</style>
